<template>
	<view class="header">
		<view class="header-top">
			<view class="go-back" @click="gobackFn()">
				<uni-icons type="left" color="white" size="30"></uni-icons>
			</view>
			<text style="color: white;">产品详情{{id}}</text>
			<view class="more">
				<uni-icons type="more-filled" color="white" size="30"></uni-icons>
			</view>
		</view>
	</view>
	<view class="product-page">
		<!-- 顶部标题栏 -->

		<!-- 产品图片 -->
		<view class="product-image" v-if="currentProduct">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in 3" :key="index">
					<image class="img" :src="currentProduct.sift_img" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>



		<!-- 产品特性 -->
		<view class="features">
			<text class="feature-text">{{currentProduct.sift_text}}</text>
		</view>

		<!-- 产品保证 -->
		<view class="product-guarantee">
			<view class="guarantee-1">
				<text>退货宝 | 退货免运费</text>
			</view>
			<view class="guarantee-2">
				<text>一周内100+人已买</text>
			</view>
			<view class="guarantee-3">
				<text>超5千人加购</text>
			</view>
		</view>

		<view class="container">
			<!-- 配送信息 -->
			<view class="delivery-info">
				<view class="info-item">
					<text class="label">配送至：</text>
					<text class="value">广州市 白云区 金山街道</text>
				</view>
				<view class="info-item add-box">
					<view>
						<text class="label">快递：</text>
						<text class="value">免费</text>
					</view>
					<!-- <view class="add">
						<uni-number-box width="15" style="margin-left: 20rpx;" min="1" background="#ff7066" color="#fff"
							@change="changeValue" />
					</view> -->
				</view>
				<view class="info-item">
					<text class="label">配送时效：</text>
					<text class="value">现货，付款后48小时内发货</text>
				</view>
				<view class="more-info">
					<text>更多信息 ></text>
				</view>
			</view>

			<!-- 产品信息 -->
			<view class="product-info">
				<view class="info-item">
					<text class="label">品牌、质地、颜色分类：</text>
					<text class="value">卡其色</text>
				</view>
				<view class="more-info">
					<text>更多信息 ></text>
				</view>
			</view>
		</view>
	</view>
	<!-- 价格与购买 -->
	<view class="footer">
		<view class="price-section">
			<div class="price-1">
				<text class="price01">¥</text>
				<text class="price">{{currentProduct.sift_Sprict}}</text>
				<text class="price02">元</text>
			</div>
			<view class="cart-buy">
				<button class="cart-button" @click="addCartFn(id)">添加购物车</button>
				<button class="buy-button" @click="buyNow(id)">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 详情页id
				id: "",
				// 初始化空数组以接收传递的数据
				sift_list: [],
				// 保存找到的对象
				currentProduct: "",
				// quantity: 1
			};
		},
		// 生命周期的钩子函数
		onLoad(options) {
			let id = options.detail_id;
			const data = options.data;
			// console.log(options.id);
			if (id && data) {
				// console.log("1111", id);
				// 解析传递的数据
				this.sift_list = JSON.parse(decodeURIComponent(data));
				this.id = id;
			};
			if (data) {
				this.currentProduct = this.sift_list.find(item => item.id.toString() === id);
			}
		},
		methods: {
			// decreaseQuantity() {
			// 	if (this.quantity > 1) this.quantity--;
			// },
			// increaseQuantity() {
			// 	this.quantity++;
			// },
			// 点击立即购买
			buyNow(pay_id) {
				// 将currentProuduct对象序列化为JSON字符串
				const productData = JSON.stringify(this.currentProduct)
				let token = uni.getStorageSync("AUTOTOKEN");
				if(!token){
					uni.showModal({
						title: "提示",
						content: "您还没登录，请登录！~~",
						success: (res) => {
							if (res.confirm) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1000)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					})
				}
				else{
					// 实现立即购买的逻辑
					uni.navigateTo({
						url: `/pages/pay/pay?pay_id=${pay_id}&productData=${encodeURIComponent(productData)}`
					})
				}
			},
			// 导航栏显示/隐藏方法
			showActiveFn() {
				this.isActive = !this.isActive; // 切换状态 
			},
			// 点击添加购物车
			addCartFn(cart_id){
				// 将currentProuduct对象序列化为JSON字符串
				// const productData = JSON.stringify(this.currentProduct)
				let token = uni.getStorageSync("AUTOTOKEN");
				if(!token){
					uni.showModal({
						title: "提示",
						content: "您还没登录，请登录！~~",
						success: (res) => {
							if (res.confirm) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1000)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					})
				}
				else{
					setTimeout(()=>{
						uni.showToast({
							title: "商品添加成功",
							icon: "success"
						},1000)
					})
				}
			},
			// 返回按钮
			gobackFn() {
				uni.navigateBack({
					delta: 1 // 返回的页面数，1表示返回上一页
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';

	.swiper-box {
		height: 100%;
		// background-color: red;
	}

	.product-page {
		// width: 100%;
		// height: 1000rpx;
		// padding: $pad;
		font-family: Arial, sans-serif;
		// background-color: #f0f0f0;
		padding-bottom: 100rpx;
	}

	.header {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 100;

		.header-top {
			padding: $pad;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 18px;
			margin-bottom: 10px;
			// padding: 20rpx;
			background-color: $bagroundColor;
			opacity: .9;

			.go-back,
			.more {
				width: 60rpx;
				height: 60rpx;
				background-color: #ffa28d;
				border: 2rpx solid #fff;
				border-radius: 10rpx;
				// box-shadow: $boxShadow;
			}
		}
	}

	.product-image {
		width: 100%;
		margin-top: 120rpx;
		text-align: center;
		margin-bottom: 10px;
		// background-color: #ccc;
		height: 550rpx;

		.img {
			width: 100%;
			height: 100%;
			// object-fit: scale-down;
			// border-radius: 10rpx;
		}
	}

	.features {
		padding: $pad;
		margin-bottom: 10px;

		.feature-text {
			color: $color;
			font-size: 35rpx;
			font-weight: 700;
			overflow: hidden;
			/* 超出隐藏 */
			display: -webkit-box;
			/* 设置为 flexbox */
			-webkit-box-orient: vertical;
			/* 垂直显示 */
			-webkit-line-clamp: 2;
			/* 显示的行数 */
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
		}
	}

	.product-guarantee {
		padding: $pad;
		// width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 23rpx;
		font-weight: 700;
		margin-bottom: 20rpx;

		.guarantee-1 {
			background-color: #ffe6cd;
			padding: 15rpx;
			border-radius: 15rpx;
			color: $color;
		}

		.guarantee-2,
		.guarantee-3 {
			background-color: #f0f0f0;
			padding: 15rpx;
			border-radius: 15rpx;
			color: #838383;
		}
	}

	.container {
		font-family: Arial, sans-serif;
	}

	.delivery-info,
	.product-info {
		margin-bottom: 10px;
		padding: 10px;
		border-bottom: 1px solid #ddd;
	}

	.info-item {
		margin: 5px 0;
	}

	.add-box {
		display: flex;
		justify-content: space-between;

		.add {
			text-align: center;
			width: 177rpx;
			background-color: $bagroundColor;
			border-radius: 50rpx;
		}
	}

	.label {
		color: #888;
	}

	.value {
		color: #333;
	}

	.more-info {
		color: #ff5757;
		text-align: right;
		cursor: pointer;
		font-size: 25rpx
	}

	.product-info {
		margin-bottom: 20px;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;

		.price-section {
			height: 120rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// margin-top: 20px;
			// margin-bottom: 200rpx;

			.price01,
			.price02 {
				font-size: 35rpx;
				color: $color;
			}
		}
	}

	.price {
		font-size: 55rpx;
		font-weight: 600;
		color: $color;
		margin: 0 5rpx;
		font-family: Arial, Helvetica, sans-serif;
	}

	.cart-buy {
		display: flex;
		align-items: start;
		height: 100rpx;
		background: $bgRight;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}

	.buy-button,
	.cart-button {
		text-align: center;
		line-height: 105rpx;
		background-color: transparent;
		color: #fff;
		padding: 0px 15px;
		border-radius: 50rpx;
		border: none;

	}
</style>